<template>
  <div ref="echartsBarRef" :class="className" :style="{ height: heightSize, width: widthSize }" />
</template>

<script setup>
import * as echarts from "echarts";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  xDatas: {
    type: Array,
    default: () => [],
  },
  yDatas: {
    type: Array,
    default: () => [],
  },
  className: {
    type: String,
    default: "barChartStyle",
  },
  widthSize: {
    type: String,
    default: "100%",
  },
  heightSize: {
    type: String,
    default: "300px",
  },
})
const className = props.className;
const widthSize = props.widthSize;
const heightSize = props.heightSize;
const echartsBarRef = ref(null);

let myChart = null;

onMounted(() => {
  if (echartsBarRef.value) {
    initChart(props.xDatas);
  }
});

watch(
  () => props.xDatas,
  (newValue) => {
    initChart(newValue);
  },
)

// 组件卸载前销毁图表，避免内存泄露
onUnmounted(() => {
  if (myChart) {
    myChart.dispose();
  }
});

function initChart(xDataList) {
      myChart = echarts.init(echartsBarRef.value, "macarons");
      // 绘制左侧面
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          // 会canvas的应该都能看得懂，shape是从custom传入的
          const xAxisPoint = shape.xAxisPoint;
          const c0 = [shape.x, shape.y];
          const c1 = [shape.x - 13, shape.y - 13];
          const c2 = [xAxisPoint[0] - 13, xAxisPoint[1] - 13];
          const c3 = [xAxisPoint[0], xAxisPoint[1]];
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath();
        },
      });
      // 绘制右侧面
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x, shape.y];
          const c2 = [xAxisPoint[0], xAxisPoint[1]];
          const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9];
          const c4 = [shape.x + 18, shape.y - 9];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      // 绘制顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y];
          const c2 = [shape.x + 18, shape.y - 9];
          const c3 = [shape.x + 5, shape.y - 22];
          const c4 = [shape.x - 13, shape.y - 13];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      // 注册三个面图形
      echarts.graphic.registerShape("CubeLeft", CubeLeft);
      echarts.graphic.registerShape("CubeRight", CubeRight);
      echarts.graphic.registerShape("CubeTop", CubeTop);

      const VALUE = [
        0, 0, 0, 0, 0, 0,0];
      myChart.setOption({
        backgroundColor: "#fff",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params, ticket, callback) {
            const item = params[0];
            return item.name + " : " + item.value;
          },
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: "20%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xDataList,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#333",
              fontSize: 12,
            },
          },
          axisTick: {
            show: false,
            alignWithLabel:true
          },
          axisLabel: {
            show: true,
            fontSize: 12,
            ellipsis: "...",
            overflow:'truncate',
            width:50
          },
        },
        yAxis: {
          splitArea:{
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
        },

        series: [
          {
            type: "custom",
            renderItem: function (params, api) {
              let cubeLeftStyle = "";
              let cubeRightStyle = "";
              let cubeTopStyle = "";
              if (params.dataIndex%4 == 0) {
                cubeLeftStyle = "rgba(223, 182, 129,.27)";
                cubeRightStyle = "rgba(223, 182, 129,.27)";
                cubeTopStyle = "rgba(223, 182, 129,.27)";
              } else if (params.dataIndex%4 == 1) {
                cubeLeftStyle = "rgba(106, 146, 223,.27)";
                cubeRightStyle = "rgba(106, 146, 223,.27)";
                cubeTopStyle = "rgba(106, 146, 223,.27)";
              } else if (params.dataIndex%4 == 2) {
                cubeLeftStyle = "rgba(117, 39, 195,.27)";
                cubeRightStyle = "rgba(117, 39, 195,.27)";
                cubeTopStyle = "rgba(117, 39, 195,.27)";
              } else if (params.dataIndex%4 == 3) {
                cubeLeftStyle = "rgba(174, 30, 29,.27)";
                cubeRightStyle = "rgba(174, 30, 29,.27)";
                cubeTopStyle = "rgba(174, 30, 29,.27)";
              }
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                type: "group",
                children: [
                  {
                    type: "CubeLeft",
                    shape: {
                      api,
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: cubeLeftStyle
                    },
                  },
                  {
                    type: "CubeRight",
                    shape: {
                      api,
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: cubeRightStyle
                    },
                  },
                  {
                    type: "CubeTop",
                    shape: {
                      api,
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: cubeTopStyle
                    },
                  },
                ],
              };
            },
            data: props.yDatas,
          },
          {
            type: "custom",
            renderItem: (params, api) => {

              let cubeLeftStyle = "";
              let cubeRightStyle = "";
              let cubeTopStyle = "";
              if (params.dataIndex%4 == 0) {
                cubeLeftStyle = "rgb(223, 182, 129)";
                cubeRightStyle = "rgb(223, 182, 129)";
                cubeTopStyle = "rgb(223, 182, 129)";
              } else if (params.dataIndex%4 == 1) {
                cubeLeftStyle = "rgb(106, 146, 223)";
                cubeRightStyle = "rgb(106, 146, 223)";
                cubeTopStyle = "rgb(106, 146, 223)";
              } else if (params.dataIndex%4 == 2) {
                cubeLeftStyle = "rgb(117, 39, 195)";
                cubeRightStyle = "rgb(117, 39, 195)";
                cubeTopStyle = "rgb(117, 39, 195)";
              } else if (params.dataIndex%4 == 3) {
                cubeLeftStyle = "rgb(174, 30, 29)";
                cubeRightStyle = "rgb(174, 30, 29)";
                cubeTopStyle = "rgb(174, 30, 29)";
              }
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                type: "group",
                children: [
                  {
                    type: "CubeLeft",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: cubeLeftStyle,
                    },
                  },
                  {
                    type: "CubeRight",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: cubeRightStyle,
                    },
                  },
                  {
                    type: "CubeTop",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: cubeTopStyle,
                    },
                  },
                ],
              };
            },
            data: VALUE,
          },
          {
            type: "bar",
            label: {
              normal: {
                show: true,
                position: "top",
                fontSize: 16,
                color: "#000",
                offset: [2, -25],
              },
            },
            itemStyle: {
              color: "transparent",
            },
            data: props.yDatas,
          },
        ],
      });
  window.addEventListener("resize", () => {
    myChart.resize();
  });
}
</script>
